<template>
	<view class="content">
		<view class="nav-bar-wrap">
			<uv-navbar title="班级详情" @leftClick="leftClick"
				bg-color="linear-gradient(124deg, #FFBD4D 0%, #FF903C 100%)"></uv-navbar>


			<view class="nav-content-wrap">
				<view class="name">
					班级名称
				</view>
				<view class="wrap-info-list">
					<view class="item">
						<image src="/static/class_1.png" mode="aspectFill"></image>
						<!-- <uv-icon name="search" color="#ccc" size="28"></uv-icon> -->
						<text class="text">课程：</text>
						<text class="text">课程</text>
					</view>
					<view class="item">
						<image src="/static/class_2.png" mode="aspectFill"></image>
						<!-- <uv-icon name="search" color="#ccc" size="28"></uv-icon> -->
						<text class="text">班级老师：</text>
						<text class="text">班级老师</text>
					</view>
					<view class="item">
						<image src="/static/class_3.png" mode="aspectFill"></image>
						<!-- <uv-icon name="search" color="#ccc" size="28"></uv-icon> -->
						<text class="text">上课教室：</text>
						<text class="text">上课教室</text>
					</view>
					<view class="item">
						<image src="/static/class_4.png" mode="aspectFill"></image>
						<!-- <uv-icon name="search" color="#ccc" size="28"></uv-icon> -->
						<text class="text">班级人数：</text>
						<text class="text">班级人数</text>
					</view>
				</view>
			</view>

		</view>

		<uv-tabs :current="active" :list="list" @click="onTabChange" :activeStyle="activeStyle" lineWidth="65"
			lineColor="#FF8535" :itemStyle="itemStyle"></uv-tabs>

		<block>
			<view class="list1" v-if="active==0">
				
				<wu-calendar :insert="true" type="week" :fold="true" startWeek="mon" @change="calendarChange"
					color="#FF8535"></wu-calendar>
				
				<view class="list1-item" v-for="(item,index) in userList" :key="index">
					<image src="@/static/ico_head.png" mode="aspectFill" class="avatar"></image>

					<view class="info">
						<text class="name">{{item.name}}</text>
						<text class="note">{{item.note}}</text>
					</view>

					<view class="fixed-right-text">
						<text class="status-text"
							:style="{color:item.status==1?'#00B578':(item.status==2?'#FA5151':'#FF8535')}">{{item.text}}</text>
					</view>
				</view>
			</view>

			<view class="list2" v-if="active==1">
				<courseSchedule></courseSchedule>
			</view>
			<view class="list3" v-if="active==2">
				<courseSchedule></courseSchedule>
			</view>
		</block>
	</view>
</template>
<script>
	import courseSchedule from '@/components/courseSchedule/courseSchedule.vue'
	
	export default {
		components: {
			courseSchedule,
		},
		data() {
			return {
				active: 1,
				list: [{
					name: '学生列表',
				}, {
					name: '课程情况',
				}, {
					name: '作业情况'
				}],
				userList: [{
						name: '小明',
						status: 1,
						avatar: '',
						text: '到课',
						note: '扣1课时'
					},
					{
						name: '小明',
						status: 2,
						avatar: '',
						text: '请假',
						note: '扣1课时'
					},
					{
						name: '小明',
						status: 3,
						avatar: '',
						text: '未到',
						note: '扣1课时'
					},
					{
						name: '小明',
						status: 1,
						avatar: '',
						text: '到课',
						note: '扣1课时'
					}
				]
			}
		},
		computed: {
			itemStyle() {
				return {
					flex: '1',
					height: '40px',
					background: '#FFF',
					// height:'80px'
				}
			},
			activeStyle() {
				return {
					color: '#FF8535'
				}
			}
		},
		methods: {
			leftClick() {
				uni.navigateBack()
			},
			onTabChange({
				index
			}) {
				this.active = index
			},
			calendarChange(e) {
				console.log(e);
			}
		}
	}
</script>


<style lang="scss">
	page {
		background: #f7f8fa;
	}

	.nav-bar-wrap {
		position: relative;
		height: 510rpx;
		opacity: 1;

		background: linear-gradient(124deg, #FFBD4D 0%, #FF903C 100%);

		.nav-content-wrap {
			position: absolute;
			top: 200rpx;
			left: 50rpx;

			.name {
				font-family: PingFang SC;
				font-size: 40rpx;
				font-weight: 500;
				line-height: normal;
				letter-spacing: 0px;

				font-variation-settings: "opsz" auto;
				color: #FFFFFF;
			}

			.wrap-info-list {
				margin-top: 24rpx;
				margin-left: -4rpx;

				.item {
					display: flex;
					align-items: center;
					height: 48rpx;
					padding: 2rpx 0;

					.text {
						margin-left: 10rpx;
						font-family: PingFang SC;
						font-size: 28rpx;
						font-weight: 500;
						line-height: normal;
						letter-spacing: 0px;

						font-variation-settings: "opsz" auto;
						color: #FFFFFF;
					}

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
	}

	.list1 {
		margin-top: 20rpx;

		&-item {
			position: relative;
			display: flex;
			align-items: center;
			height: 160rpx;
			opacity: 1;
			background: #FFFFFF;
			padding: 12rpx 40rpx 12rpx 48rpx;
			box-sizing: border-box;
			border-width: 0px 0px 1px 0px;
			border-style: solid;
			border-color: rgba(230, 229, 231, 0.8);

			.avatar {
				width: 112rpx;
				height: 112rpx;
				opacity: 1;
				border-radius: 50%;
				background-color: orangered;
			}

			.info {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				justify-content: space-between;
				width: 96rpx;
				height: 85rpx;
				text-align: left;
				margin-left: 30rpx;

				.name {
					opacity: 1;
					font-family: 苹方-简;
					font-size: 32rpx;
					font-weight: 500;
					line-height: 38rpx;
					text-align: center;
					letter-spacing: 0px;

					color: #3D3D3D;
				}

				.note {
					opacity: 0.7;
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 38rpx;
					letter-spacing: 0px;

					font-variation-settings: "opsz" auto;
					color: #3D3D3D;
				}
			}

			.fixed-right-text {
				position: absolute;
				top: 50%;
				/* 将图标定位到父元素顶部的中间位置 */
				transform: translateY(-50%);
				/* 使用transform属性将图标向上移动自身高度一半的距禿，实现居中效果 */
				right: 40rpx;

				/* 将图标定位到父元素的最右侧 */
				// width: 30px;
				// height: 30px;
				// border: 1px solid red;
				.status-text {
					font-family: 苹方-简;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 38rpx;
					text-align: right;
					letter-spacing: 0px;
				}

			}
		}
	}


	.lesson {
		margin: 20rpx 32rpx 0;
		background: #fff;
		border-radius: 8rpx;
		color: #3D3D3D;

		.state {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-top: 1px solid rgba(230, 229, 231, 0.8);
			font-size: 28rpx;
			font-weight: 500;
			color: #FF8535;
		}

		.info {
			padding: 10rpx 140rpx 10rpx 75rpx;
			position: relative;

			.ico_call {
				position: absolute;
				right: 0;
				bottom: -20rpx;
				width: 220rpx;
			}

			.text {
				padding: 8rpx 0;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 38rpx;
			}

			.weekly {
				position: absolute;
				top: 20rpx;
				right: 40rpx;
				font-size: 24rpx;
				line-height: 34rpx;
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			padding: 0 40rpx;
			border-bottom: 1px solid rgba(230, 229, 231, 0.8);

			.ico_org {
				flex-shrink: 0;
				width: 18rpx;
				height: 18rpx;
				background: #FF8535;
				border-radius: 50%;
				margin-right: 15rpx;
			}

			.time {
				width: 100%;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 50rpx;
			}

			.teacher {
				flex-shrink: 0;
				display: flex;
				align-items: center;

				.ph {
					width: 52rpx;
					height: 52rpx;
					flex-shrink: 0;
					margin-right: 10rpx;
				}

				.text {
					font-size: 24rpx;
					line-height: 34rpx;
				}
			}
		}

		&.hover {
			color: #aaa;

			.ph {
				opacity: 0.7;
			}

			.ico_org {
				background: #D8D8D8;
			}

			.state {
				color: #aaa;
			}
		}
	}


	.list2 {
		margin-top: 20rpx;

		&-item {
			margin-bottom: 48rpx;

			.head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 90rpx;
				padding: 0 40rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				/* 描边 */
				border-width: 0px 0px 1px 0px;
				border-style: solid;
				border-color: rgba(230, 229, 231, 0.8);

				.left {
					display: flex;
					align-items: center;

					.poi {
						width: 18rpx;
						height: 18rpx;
						opacity: 1;

						/* 点缀色 */
						background: #FF8535;
						border-radius: 50%;
						margin-right: 16rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
					}

					text {
						margin-left: 10rpx;
						font-family: PingFang SC;
						font-size: 24rpx;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0px;

						font-variation-settings: "opsz" auto;
						color: #3D3D3D;
					}
				}
			}

			.main {
				position: relative;
				height: 230rpx;
				opacity: 1;
				background: #FFFFFF;

				box-sizing: border-box;
				/* 描边 */
				border-width: 0px 0px 1px 0px;
				border-style: solid;
				border-color: rgba(230, 229, 231, 0.8);
				padding: 22rpx 46rpx 18rpx 106rpx;

				.fixed-text {
					position: absolute;
					top: 22rpx;
					right: 40rpx;
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0px;

					font-variation-settings: "opsz" auto;
					color: #3D3D3D;
				}

				.texts {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					height: 100%;

					text {
						opacity: 0.5;
						font-family: PingFang SC;
						font-size: 24rpx;
						font-weight: normal;
						line-height: 38rpx;
						letter-spacing: 0px;

						font-variation-settings: "opsz" auto;
						color: #3D3D3D;
					}
				}
			}

			.footer {
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: #FFFFFF;

				text {
					font-family: 苹方-简;
					font-size: 28rpx;
					font-weight: 500;
					text-align: center;
					letter-spacing: 0px;

					color: #FF8535;
				}
			}
		}
	}

	.list3 {
		margin-top: 20rpx;

		&-item {
			margin-bottom: 48rpx;

			.head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 90rpx;
				padding: 0 40rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				/* 描边 */
				border-width: 0px 0px 1px 0px;
				border-style: solid;
				border-color: rgba(230, 229, 231, 0.8);

				.left {
					display: flex;
					align-items: center;

					.poi {
						width: 18rpx;
						height: 18rpx;
						opacity: 1;

						/* 点缀色 */
						background: #FF8535;
						border-radius: 50%;
						margin-right: 16rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;

					image {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
					}

					text {
						margin-left: 10rpx;
						font-family: PingFang SC;
						font-size: 24rpx;
						font-weight: normal;
						line-height: normal;
						letter-spacing: 0px;

						font-variation-settings: "opsz" auto;
						color: #3D3D3D;
					}
				}
			}

			.main {
				position: relative;
				height: 230rpx;
				opacity: 1;
				background: #FFFFFF;

				box-sizing: border-box;
				/* 描边 */
				border-width: 0px 0px 1px 0px;
				border-style: solid;
				border-color: rgba(230, 229, 231, 0.8);
				padding: 22rpx 46rpx 18rpx 106rpx;

				.fixed-text {
					position: absolute;
					top: 22rpx;
					right: 40rpx;
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0px;

					font-variation-settings: "opsz" auto;
					color: #3D3D3D;
				}

				.texts {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					height: 100%;

					text {
						opacity: 0.5;
						font-family: PingFang SC;
						font-size: 24rpx;
						font-weight: normal;
						line-height: 38rpx;
						letter-spacing: 0px;

						font-variation-settings: "opsz" auto;
						color: #3D3D3D;
					}
				}

				.fixed-img {
					position: absolute;
					right: 0.52px;
					bottom: -19rpx;
					width: 220rpx;
					height: 220rpx;
				}
			}

			.footer {
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: #FFFFFF;

				text {
					font-family: 苹方-简;
					font-size: 28rpx;
					font-weight: 500;
					text-align: center;
					letter-spacing: 0px;

					color: #FF8535;
				}
			}
		}
	}
</style>